/* --- Image Links --- */

.btn-flowers:after { background-image: url(../images/btn-flower.png); }
.btn-flowers { background-image: url(../images/flowers2.jpg); z-index: 3!important; }

.btn-cards:after { background-image: url(../images/btn-card.png); }
.btn-cards { background-image: url(../images/sympathy-card.jpg); z-index: 2!important; }

.btn-gifts:after { background-image: url(../images/btn-gift8.png); }
.btn-gifts { background-image: url(../images/gifts-bg8.jpg); z-index: 1!important; }

.btn-tree:after { background-image: url(../images/btn-gift9.png); }
.btn-tree { background-image: url(../images/gifts-bg9.jpg); z-index: 4!important; }


/* --- Vendor buttons --- */

.obit-links .btn-flowers, 
.obit-links .btn-cards, 
.obit-links .btn-gifts,
.obit-links .btn-tree {
	position: relative; display: block!important;
	flex-direction: column!important;
	border-radius: 3px;
	border-top: none!important;
	margin: 0 0 1.5em; 
	padding: 1em 30px 1em 1em!important;
	background-size: 150%;
	background-position: left 15%;
	min-width: 43%;
}

.btn-flowers:after, 
.btn-cards:after, 
.btn-gifts:after,
.btn-tree:after {
	position: absolute; z-index: 4; content: " ";
	top: 0; right: -25px;
	width: 45%; height: 130%; max-width: 110px;
	pointer-events: none;
	background-size: 100%; background-repeat: no-repeat;
	background-position-x: 0; background-position-y: bottom;
}

/* --- TREE BTN ONLY --- */
.obit-links .btn-tree { background-position: right 33%!important; }
.obit-links .btn-tree:after { z-index: -1; top: auto; bottom: 0; right: 0; width: 70%; max-width: 120px; }
/* -------------------------------- */

/* --- fade background img with rgba overlay --- */
.btn-flowers .title:before, 
.btn-cards .title:before, 
.btn-gifts .title:before,
.btn-tree .title:before {
	position: absolute; z-index: -1; content: " ";
	top: 0; right: 0; bottom: 0; left: 0;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.6);
	transition: all 250ms ease-in-out;
}

.btn-flowers .title, .btn-flowers .subtitle,
.btn-cards .title, .btn-cards .subtitle,
.btn-gifts .title, .btn-gifts .subtitle,
.btn-tree .title, .btn-tree .subtitle { color: black; padding-bottom: 0; text-shadow: 0 0 4px rgb(255,255,255); }

.btn-flowers .title, 
.btn-cards .title, 
.btn-gifts .title,
.btn-tree .title {
	line-height: 1;
	font-size: 1.4em;
	white-space: nowrap;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-weight: normal;
	font-style: normal;
}

.btn-flowers .subtitle, 
.btn-cards .subtitle,
.btn-gifts .subtitle,
.btn-tree .subtitle { line-height: 1.3;  margin: 0; padding-bottom: 7px; }

.btn-flowers:hover .title:before, 
.btn-cards:hover .title:before, 
.btn-gifts:hover .title:before,
.btn-tree:hover .title:before  { background-color: rgba(255, 255, 255, 0.4); }

/* --- Media Query Custom just for Themes --- */

@media screen and (max-width: 1023px) {
	div.obit-links { width: 100%; }

	.btn-flowers, 
	.btn-cards, 
	.btn-gifts,
	.btn-tree { margin: 0 .25em .75em!important; }

	.obit-links .btn-flowers, 
	.obit-links .btn-cards, 
	.obit-links .btn-gifts,
	.obit-links .btn-tree { margin: 0 0 1.5em; }
}

/* --- Media Query Device minus small ones --- */

@media (min-width: 420px) and (max-width: 768px) { 
	/* -- cards and flowers buttons -- */
	.obit-links { width: 100%; }
	.btn-flowers:after, 
	.btn-cards:after, 
	.btn-gifts:after { right: 10px; }
	.btn-tree:after {}

	.obit-links { margin: 0 auto!important; }
	.obit-links .btn-flowers, 
	.obit-links .btn-cards, 
	.obit-links .btn-gifts,
	.obit-links .btn-tree { min-width: 42%!important; max-width: 42%; float: left; }
}


/* --- Media Query Global Device --- */

@media all and (max-width: 768px) {

	.obit-links .btn-flowers, 
	.obit-links .btn-cards, 
	.obit-links .btn-gifts, 
	.obit-links .btn-tree { 
		margin: 0 .25em .75em!important;
		border-radius: 10px!important;
		text-align: left!important;
	}

	.btn-flowers .title:before, 
	.btn-cards .title:before, 
	.btn-gifts .title:before,
	.btn-tree .title:before { border-radius: 7px!important; }

	.btn-flowers:after, .btn-cards:after, .btn-gifts:after {
		right: -5px;
		width: 45%;
		height: 120%;
		max-width: 120px;
	}
	.btn-tree:after {
		width: 80%!important;
		max-width: 125px!important;
	}

	/* -- Flex Obit only -- */
	.obit-profile .obit-links .btn-flowers, 
	.obit-profile .obit-links .btn-cards, 
	.obit-profile .obit-links .btn-gifts, 
	.obit-profile .obit-links .btn-tree { 
		margin: 0 .25em 10px!important; 
		min-width: 90%;
		width: 100%;
		max-width: 100%;
		border-radius: 7px!important;	
	}

	.obit-profile .small { padding-left: 0; padding-top: 0; font-size: 100%; }
}